h1{
	text-align: center;
}
h2{
	text-align: center;
}

#StartGame {
	button{
		text-align: center;
		font-size: 20px;
		width: 33%;
		height: 80px;
	}
	justify-content: center;
	display: flex;
	
}
#PlayerChoice {
	button{
		text-align: center;
		font-size: 20px;
		width: 49%;
		height: 80px;
	}
	display: none;
	
}
#PieceCount{
	display: none;
	justify-content: space-between;
	width: 100%;
	padding: 0 20px;
	h2{
		font-size: 35px;

	}
}
#OrangePieces{
	display: flex;
	flex-direction: column;
	gap: 10px;
	h3{
		font-size:20px;
	}
	button{
		background-color: orange;
		text-align:center;
		font-size: 15px;
		
		height: 50px;
	}
	button:hover{
		background-color:coral;
	}
	p{
		font-size:20px;
	}
}
#GreyPieces{
	padding-right: 5%;
	display: flex;
	flex-direction: column;
	gap: 10px;
	h3{
		font-size:20px;
	}
	button{
		background-color: darkgrey;
		text-align:center;
		font-size: 15px;
		
		height: 50px;
	}
	button:hover{
		background-color:grey;
	}
	p{
		font-size:20px;
	}
}

.piece-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

#ButtonGrid{
	display: none;
	grid-template-columns: repeat(6, 80px);
	grid-template-rows: repeat(6, 80px);
	gap: 8px;

	justify-content: center;
}